<template>
  <div
    class="card-slot-container"
    @click="handleClickCloseSetting"
    :style="{
      width: `${slotW}px`,
      height: `${cardSize}px`,
    }"
  >
    <div class="slot-container">
      <template class="cardIconBox" v-for="(item, i) in infoStore.slotCards">
        <CardIcon
          v-if="infoStore.slotIsShowCards[item.cardId + '']"
          :key="item.cardId + '-' + item.iconId"
          :cardId="item.cardId"
          :cardSize="cardSize"
          :place="place"
          :iconId="item.iconId"
          :color="colorStore.word[1]"
          :bg="colorStore.cardBg[16]"
          :borColor="colorStore.borColor[1]"
          :anim="item.anim"
          :style="{
            'margin-right': `${i === maxNum - 1 ? 0 : 5}px`,
          }"
        />
      </template>
      <!-- <CardIcon
        v-if="isShowCards['5']"
        :cardId="5"
        :cardSize="cardSize"
        :iconId="6"
        :place="place"
      /> -->
    </div>
  </div>
</template>

<script>
import CardIcon from "@/components/CardIcon";
import delay from "@/utils/delay";
import clearVoice from "@/assets/audio/clearVoice/1.mp3"; // 卡片消除的音效
import closeTips from "@/utils/closeTips";
export default {
  components: {
    CardIcon,
  },
  props: {
    // 卡片尺寸
    cardSize: {
      type: Number,
      required: true,
    },
    // 卡槽容量
    maxNum: {
      type: Number,
      default: 6,
    },
    // 卡槽中每次消除卡片的个数
    clearCard: {
      type: Number,
      default: 3,
    },
  },
  data() {
    return {
      infoStore: this.$store.state.info,
      colorStore: this.$store.state.color,
      place: 1, // 卡片所在位置, 1表示在卡槽区
    };
  },
  computed: {
    // 游戏区的实际宽度 [px]
    slotW() {
      return this.cardSize * this.maxNum + 5 * (this.maxNum - 1);
    },
  },
  mounted() {
    // 监听游戏区的卡片成功点击事件
    this.$bus.$on("successClick", this.handleSuccessClick);
  },
  beforeDestroy() {
    // 移除监听
    this.$bus.$off("successClick", this.handleSuccessClick);
  },
  methods: {
    // 点击后关闭设置窗口和卡片池窗口
    handleClickCloseSetting() {
      // this.$store.commit("info/setIsShowSetting", false);
      this.$bus.$emit("clickSetting", false);
      this.$bus.$emit("clickCardPool", true);
      closeTips();
    },
    // 获取重复clearCard个数的卡片的数组
    getSameCards(en, arr) {
      for (let i = 0; i < arr.length - en.clearCard + 1; i++) {
        let sameNum = 1; // 相同的个数
        const indexArr = [i];
        for (let j = 0; j < arr.length; j++) {
          // if (arr[i] === arr[j] && i !== j) { // 测试用验证
          if (arr[i].iconId === arr[j].iconId && i !== j) {
            sameNum++;
            indexArr.push(j);
            if (sameNum === en.clearCard) {
              return indexArr;
            }
          }
        }
      }
      return -1;
    },
    // 处理卡片成功点击事件 [cardData中包含属性:cardId,iconId,coor]
    async handleSuccessClick(data) {
      // 测试用例
      // const arr1 = [1, 2, 1, 5, 2, 1, 6, 6, 3]; // 0, 2, 5
      // console.log(">>>>", this.getSameCards(this, arr1));

      const cardData = data.cardData;
      // 卡槽中的当前卡片数
      let curNum = this.infoStore.slotCards.length;
      if (curNum < this.maxNum) {
        // 若卡槽未满
        console.log("卡槽卡片+1");
        this.$store.commit("info/addSlotCard", cardData); // 加入卡槽的卡片组
        curNum++;
        console.log("当前卡槽:", this.infoStore.slotCards);
        if (curNum >= this.clearCard) {
          // 当卡槽中卡片数大于clearCard时 [可能能消除]
          const cards = this.infoStore.slotCards;
          // 相同卡牌的索引的数组
          const indexArr = this.getSameCards(this, cards);
          if (indexArr !== -1) {
            // 卡槽中达到clearCard张重复卡片

            // 不能这样写, 因为当前面的被删后索引位就变了
            // indexArr.forEach((item, i) => {
            //   this.$store.commit("info/deleteSlotCard", item);
            // });

            // 禁止点击卡片
            this.$store.commit("info/setIsBanCardClick", true);
            await delay(400); // 延时0.4s后删除重复的卡片
            // 允许点击卡片
            this.$store.commit("info/setIsBanCardClick", false);
            // 抛出卡片消除事件
            this.$bus.$emit("clearCards", { voice: clearVoice });
            // 卡片消除
            for (let i = indexArr.length - 1; i >= 0; i--) {
              curNum--;
              this.$store.commit("info/deleteSlotCard", indexArr[i]);
            }
          } else if (curNum === this.maxNum) {
            // 若加一张卡后无法消除且卡槽已满
            // if (this.infoStore.gameCards.length === 0) {
            //   this.$bus.$emit("gameWin");
            //   return;
            // }
            await delay(10);
            if (this.infoStore.isStarted) {
              this.$bus.$emit("gameOver");
              return;
            }
          }
        }
        //  else if (this.infoStore.gameCards.length === 0) {
        //   this.$bus.$emit("gameWin");
        //   return;
        // }
      }
      //  else {
      //   // 若卡槽已满
      //   this.$bus.$emit("gameOver");
      // }
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/styles/var.less";
.card-slot-container {
  margin-bottom: 50px;
  .slot-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
  }
  margin: 0 auto;
  padding: 8px 12px;
  border-left: 4px solid @gameBor;
  border-bottom: 3px solid @gameBor;
  // 阴影
  box-shadow: 6px 5px 10px rgba(0, 0, 0, 0.08), 8px 4px 7px rgba(0, 0, 0, 0.1);
}
</style>
